<template>
    <div>
        日期：
        <el-date-picker type="daterange" v-model="date" @change="fetch"/>
        <el-table :data="data" show-summary>
            <el-table-column label="日期" prop="created_at"/>
            <el-table-column label="弹幕条数" prop="danmu" sortable/>
            <el-table-column label="弹幕人数" prop="danmu1" sortable/>
            <el-table-column label="送礼人数" prop="gift" sortable/>
            <el-table-column label="礼物收入" prop="gift1" sortable/>
            <el-table-column label="人气峰值走势" prop="watch" sortable/>
            <el-table-column label="直播时长" prop="time" sortable/>
            <el-table-column label="粉丝关注" prop="fans" sortable/>
        </el-table>
        <div id="chart"></div>
    </div>
</template>

<script>
    let chart;
    export default {
        name: "xiaohulu_data",
        props: {anchor: {required: true,}},
        data() {
            return {
                date: [],
                data: [],
            };
        },
        methods: {
            fetch() {
                this.$http.get('/api/xiaohulu/anchor/' + this.anchor.id + '/' + moment(this.date[0]).format('YYYY-MM-DD') + '/' + moment(this.date[1]).format('YYYY-MM-DD')).then(res => {
                    this.data = res.data;
                });
            },
        },
        watch: {
            anchor(val) {
                if (!val.id)
                    return;
                this.$nextTick(() => {
                    this.date = [moment().subtract(7, 'day').toDate(), moment().subtract(1, 'day').toDate()];
                    this.fetch();
                });
            },
        },
        mounted() {
            chart = echarts.init(document.querySelector('#chart'));
        },
    }
</script>

<style scoped>
    #chart {
        height: 300px;
    }
</style>